@use '../utils/color_variables';
@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.alert-title {
  font-size: size_variables.$size-5;
  font-weight: font_variables.$font-weight-bold;
}

.message {
  background: color_variables.$blue-010;
  border: 1px solid color_variables.$blue-100;
  margin-bottom: size_variables.$spacing-12;
  padding: size_variables.$spacing-12 size_variables.$spacing-16 size_variables.$spacing-16
    size_variables.$spacing-12;
  position: relative;

  &:not(:last-child) {
    margin-bottom: size_variables.$spacing-20;
  }

  .message-icon {
    color: color_variables.$blue;
    margin-right: size_variables.$spacing-8;
  }

  .message-title {
    color: color_variables.$blue-500;
    font-size: 16px;
    font-weight: font_variables.$font-weight-bold;
    line-height: 1.25;
  }

  .message-body {
    border: 0;
    padding: 1em 1.25em;
    margin-top: size_variables.$spacing-4;
  }

  // message types, see message-types.js
  &.is-danger {
    background: color_variables.$red-010;
    border: 1px solid color_variables.$red-050;

    .message-body {
      color: color_variables.$red-700;
    }

    .message-icon {
      color: color_variables.$red-500;
    }

    .message-title {
      color: color_variables.$red-700;
    }
  }

  &.is-highlight {
    background: color_variables.$yellow-010;
    border: 1px solid color_variables.$yellow-100;

    .message-body {
      color: color_variables.$ui-gray-900;
    }

    .message-icon {
      color: color_variables.$yellow-500;
    }

    .message-title {
      color: color_variables.$orange-700;
    }
  }

  &.is-info {
    background-color: color_variables.$blue-010;

    .message-body {
      color: color_variables.$blue-700;
    }

    .message-header {
      background-color: color_variables.$blue-500;
      color: color_variables.$white;
    }

    .message-title {
      color: color_variables.$blue-700;
    }
  }

  &.is-success {
    background: color_variables.$green-010;
    border: 1px solid color_variables.$green-100;

    .message-body {
      color: color_variables.$green-900;
    }

    .message-icon {
      color: color_variables.$green-500;
    }

    .message-title {
      color: color_variables.$green-700;
    }
  }
}
